@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;500;600;700&display=swap");

@import "tailwindcss";
@import "tailwind-scrollbar-hide/v4";
@plugin "@tailwindcss/typography";

@theme {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --breakpoint-laptop: 72rem;
}

@layer base {
  [id] {
    scroll-margin-top: 69px;
  }
}

@layer utilities {
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
      transform: translateX(4px);
    }
  }

  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  @keyframes scroll-right {
    0% {
      transform: translateX(-50%);
    }

    100% {
      transform: translateX(0);
    }
  }

  .animate-scroll-left {
    animation: scroll-left linear infinite;
  }

  .animate-scroll-right {
    animation: scroll-right linear infinite;
  }

  @keyframes fade-in-out {
    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  .animate-fade-in-out {
    animation: fade-in-out 3s ease-in-out infinite;
  }
}
